<!-- 布局切换抽屉 -->
<script setup lang="ts">
import { CloseOutlined, SettingOutlined } from '@vicons/antd'
import CheckboxLayout from './checkbox-layout.vue'
import Container from './container.vue'
import type { LayoutType } from '~/config/layout-theme.ts'

const props = withDefaults(
  defineProps<{
    floatTop?: number | string
    drawerWidth?: number | string
    layout?: 'mix' | 'side' | 'top'
    layoutStyle: 'inverted' | 'light' | 'dark'
    layoutList?: LayoutType[]
    layoutStylList?: LayoutType[]
  }>(),
  {
    floatTop: 240,
    drawerWidth: 300
  }
)

defineEmits(['update:layout', 'update:layoutStyle'])

const show = ref(false)

const onShow = () => {
  show.value = true
}

const onHide = () => {
  show.value = false
}

const cssVars = computed(() => {
  return {
    '--pro-admin-float-top': `${props.floatTop}px`,
    '--pro-admin-drawer-width': `${props.drawerWidth}px`
  }
})
</script>

<template>
  <teleport to="body">
    <div
      :style="cssVars"
      class="fixed top-[var(--pro-admin-float-top)] right-0"
    >
      <n-button
        type="primary"
        class="b-rd-tr-0! b-rd-br-0!"
        size="large"
        @click="onShow"
      >
        <template #icon>
          <n-icon size="24">
            <SettingOutlined />
          </n-icon>
        </template>
      </n-button>
    </div>
  </teleport>
  <n-drawer v-model:show="show" width="300">
    <n-drawer-content>
      <Container v-if="layoutStylList" title="布局风格配置">
        <n-space size="large">
          <template v-for="item in layoutStylList" :key="item.key">
            <CheckboxLayout
              :layout="item.key"
              :inverted="item.inverted"
              :title="item.title"
              :checked="item.id === layoutStyle"
              @click="() => $emit('update:layoutStyle', item.id)"
            />
          </template>
        </n-space>
      </Container>
      <Container v-if="layoutList" title="导航模式配置">
        <n-space size="large">
          <template v-for="item in layoutList" :key="item.key">
            <CheckboxLayout
              :layout="item.key"
              :checked="item.key === layout"
              :title="item.title"
              @click="() => $emit('update:layout', item.key)"
            />
          </template>
        </n-space>
      </Container>
    </n-drawer-content>

    <div
      :style="cssVars"
      class="absolute top-[var(--pro-admin-float-top)] right-[var(--pro-admin-drawer-width)]"
    >
      <n-button
        type="primary"
        class="b-rd-tr-0! b-rd-br-0!"
        size="large"
        @click="onHide"
      >
        <template #icon>
          <n-icon size="24">
            <CloseOutlined />
          </n-icon>
        </template>
      </n-button>
    </div>
  </n-drawer>
</template>

<style scoped></style>
